<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-tabs>
        <el-tab-pane label="角色管理">
          <el-row style="height: 60px;">
            <el-button
              icon="el-icon-plus"
              type="primary"
              size="small"
              @click="showDialog = true"
            >
              新增角色
            </el-button>
          </el-row>
          <el-table :data="list" border>
            <el-table-column
              label="序号"
              type="index"
              width="100"
            />
            <el-table-column label="角色名称" prop="name" />
            <el-table-column label="描述" prop="description" />
            <el-table-column label="操作">
              <template #default="{row}">
                <el-button
                  size="mini"
                  type="success"
                  @click="assignPerm(row.id)"
                >分配权限</el-button>
                <el-button
                  size="mini"
                  type="primary"
                  @click="editRole(row.id)"
                >编辑
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="delRole(row.id)"
                >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件 -->
          <el-row
            type="flex"
            justify="center"
            align="middle"
            style="height: 60px"
          >
            <!-- 分页组件 -->
            <!--
              1、total: 总共多少条(接口返回total字段)
              2、current-page: 当前处于第几页
              3、page-size: 每页多少条
            -->
            <el-pagination
              :total="total"
              :current-page="page.page"
              :page-size="page.pagesize"
              layout="prev,pager,next,jumper"
              @current-change="changePage"
            />
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="公司设置">
          <el-alert
            type="info"
            show-icon
            :closable="false"
            title="对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改"
          />
          <el-form label-width="120px" style="margin-top:50px">
            <el-form-item label="公司名称">
              <el-input
                v-model="formData.name"
                disabled
                style="width:400px"
              />
            </el-form-item>
            <el-form-item label="公司地址">
              <el-input
                v-model="formData.companyAddress"
                disabled
                style="width:400px"
              />
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input
                v-model="formData.mailbox"
                disabled
                style="width:400px"
              />
            </el-form-item>
            <el-form-item label="备注">
              <el-input
                v-model="formData.remarks"
                type="textarea"
                :rows="3"
                disabled
                style="width:400px"
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!--【编辑角色弹层结构】-->
    <el-dialog
      :visible="showDialog"
      title="编辑标题"
      @close="close"
    >
      <el-form
        ref="roleFormRef"
        :model="roleFormData"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="roleFormData.name" />
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="roleFormData.description" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-row type="flex" justify="center">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </el-row>
      </template>
    </el-dialog>
    <!--【设置权限的弹层结构】-->
    <el-dialog
      title="权限设置"
      :visible="showPermissionDialog"
      @close="permissionClose"
    >
      <!--
        1、show-checkbox: 是否展示树节点的复选框
        2、check-strictly: 是否遵循父子节点不联动
        3、default-expand-all:是否默认展开
        4、props：指定配置项
        5、node-key: 节点的key对应的数据字段
        6、default-checked-keys：默认选中的节点的key的数组
      -->
      <el-tree
        ref="treeRef"
        show-checkbox
        check-strictly
        default-expand-all
        :props="{label: 'name'}"
        :data="permData"
        node-key="id"
        :default-checked-keys="checkedPermissionIds"
      />
      <template #footer>
        <el-row type="flex" justify="center">
          <el-button @click="permissionClose">取消</el-button>
          <el-button type="primary" @click="btnOk">确认</el-button>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  addRoleApi, assignPerm,
  delRoleApi,
  getCompanyInfoApi,
  getRoleInfoDetailApi,
  getRoleListApi,
  updateRoleInfoDetailApi
} from '@/api/setting'
import { mapGetters } from 'vuex'
import { getPermissionListApi } from '@/api/permission'
import { transListToTree } from '@/utils'

export default {
  name: 'SettingPage',
  data() {
    return {
      roleId: null, // 点击了编辑权限的角色id
      permData: [], // 所有的树形结构数据
      showPermissionDialog: false, // 展示权限设置弹层结构
      showDialog: false, // 展示编辑角色弹层标识
      list: [{}], // table表格数据
      checkedPermissionIds: [], // 角色选中的权限id列表
      page: {
        page: 1, // 展示第几页的数据
        pagesize: 5 // 每页多少条数据
      },
      total: 0,
      // 存储公司的详细信息
      /**
       * @type {Data}
       */
      formData: {},
      roleFormData: {},
      rules: {
        name: [
          {
            required: true,
            message: '角色名称不能为空'
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['companyId'])
  },
  created() {
    // 获取角色的列表信息
    this.getRoleList()
    // 获取公司详细信息
    this.getCompanyInfo()
  },
  methods: {
    async btnOk() {
    // 提交数据
    //   id this.roleId
    // 选中的权限数据
      await assignPerm({
        permIds: this.$refs.treeRef.getCheckedKeys(), // 修改之后的最新的权限id组成的数组
        id: this.roleId
      })
      this.$message.success('修改权限信息成功')
      this.permissionClose()
    },
    // 关闭权限弹层方法
    permissionClose() {
      // 重置选中的节点数据
      this.checkedPermissionIds = []
      // 重置点击的角色id
      this.roleId = null
      // 关闭弹层
      this.showPermissionDialog = false
    },
    // 点击了分配权限按钮
    async assignPerm(id) {
      // 把点击的id记录下来，提交的时候会用到这个id
      this.roleId = id
      //   1、所有的权限信息进行展示，树形结构进行展示
      this.permData = transListToTree(await getPermissionListApi(), '0')

      // 获取当前点击的角色的拥有的权限列表
      const { permIds } = await getRoleInfoDetailApi(id)
      // permIds: [id1, id2, id3 ...]
      this.checkedPermissionIds = permIds
      // 展示分配权限的弹层结构
      this.showPermissionDialog = true
    },
    close() {
      // 重置数据
      // 重置表单的时候只能重置表单绑定的数据，其他的数据重置不了的
      this.roleFormData = {
        name: '',
        description: ''
      }
      // 重置表单（重置校验）
      this.$refs.roleFormRef.resetFields()
      // 关闭弹层
      this.showDialog = false
    },
    async submit() {
      // 点击确定的时候调用跟新接口，进行成功提示
      // 提交之前进行表单的校验，校验通过之后再去进行提交
      await this.$refs.roleFormRef.validate()
      // 新增/编辑
      if (this.roleFormData.id) {
      //   如果id存在，肯定就是编辑场景
        await updateRoleInfoDetailApi(this.roleFormData)
      } else {
        // 新增的场景
        await addRoleApi(this.roleFormData)
      }
      // 重新获取最新的数据
      this.getRoleList()
      this.$message.success(this.roleFormData.id ? '更新角色成功' : '新增角色信息成功')
      this.close()
    },
    // 1、点击编辑按钮，调用方法同时传递id，请求当前点击的角色详细信息，进行数据回显
    async editRole(id) {
      const res = await getRoleInfoDetailApi(id)
      this.roleFormData = res
      console.log(res)
      // 弹层展示
      this.showDialog = true
    },
    // 获取角色列表信息，展示到表格里面
    async getRoleList() {
      const res = await getRoleListApi(this.page)
      this.list = res.rows
      this.total = res.total
      console.log(res)
    },
    // 点击切换页码触发changePage方法
    changePage(page) {
      // 切换之后最新的页码数
      console.log(page)
      // 获取点击之后最新的页码数，赋值给参数里面的page属性，然后去请求接口获取最新数据
      this.page.page = page
      // 重新调接口，获取数据
      this.getRoleList()
    },
    async getCompanyInfo() {
      // 获取公司的详细信息
      // id是从vuex里面获取(新建getters从user.userInfo.companyId获取)
      this.formData = await getCompanyInfoApi(this.companyId)
      // console.log(res)
    },
    async delRole(id) {
      // 删除之前，先把当前页面的数量记录下来
      const len = this.list.length
      // 弹出一个确认弹层
      await this.$confirm('是否确认删除当前角色？')
      // 调用删除角色的接口api
      await delRoleApi(id)
      // 如果删除之前有一条数据，删除成功之后，当前页面就没有数据了，页码自－
      // 如果已经在第一页了，页码不能自减了
      if (len === 1 && this.page.page > 1) {
        this.page.page--
      }
      this.$message.success('删除成功')
      //   重新获取当前页面数据
      this.getRoleList()
    }
  }
}

// 1、点击编辑，有一个弹层结构
// 2、当前点击的角色信息要进行回显（调用获取当前角色详情数据的接口）
// 3、点击确定的时候，调用接口更新角色信息（调用更新角色信息的接口）
// 4、关闭弹层
// 5、重新获取角色信息
</script>

<style>

</style>
